﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增客户</title>
    <script src="~/lib/vue/vue.global.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <link href="~/lib/element-plus/index.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        .container {
            width: 95%;
            margin: 20px auto;
        }

        .form-group {
            margin-bottom: 20px;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .form-item {
            margin-bottom: 16px;
        }

        .note-input {
            height: 100px;
        }

        .upload-area {
            margin-top: 20px;
        }

        .tip {
            margin-top: 8px;
            color: #666;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 基础信息 -->
        <div class="form-group">
            <h3>基础信息</h3>
            <el-form ref="basicForm" :model="form" label-width="120px">
                <!-- 第一行：客户编码（只读）、客户名称（必填） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户编码" class="form-item">
                            <el-input v-model="form.customer_code" placeholder="自动获取系统编号" readonly></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户名称" required class="form-item">
                            <el-input v-model="form.customer_name" placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行：所属行业、客户来源（下拉选单） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属行业" required class="form-item">
                            <el-select v-model="form.job_type" placeholder="请选择">
                                <el-option v-for="item in industryOptions" :key="item.dictValue"
                                           :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户来源" required class="form-item">
                            <el-select v-model="form.sources_of_customers" placeholder="请选择">
                                <el-option v-for="item in customersourceOptions" :key="item.dictValue"
                                           :label="item.dictLabel" :value="item.dictValue"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第三行：联系人、联系电话 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人" class="form-item">
                            <el-input v-model="form.contact_person" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" class="form-item">
                            <el-input v-model="form.contact_phone_number" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第四行：电子邮箱、销售部门 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="电子邮箱" class="form-item">
                            <el-input v-model="form.email_address" placeholder="请输入电子邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="销售部门" required class="form-item">
                            <el-select v-model="form.sales_dept_name" placeholder="请选择">
                                <el-option label="销售一部" value="销售一部"></el-option>
                                <el-option label="销售二部" value="销售二部"></el-option>
                                <el-option label="销售三部" value="销售三部"></el-option>
                                <el-option label="大客户部" value="大客户部"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第五行：销售负责人、状态（启用/停用） -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="销售负责人" required class="form-item">
                            <el-select v-model="form.person_in_charge" placeholder="请选择">
                                <el-option label="张三" value="张三"></el-option>
                                <el-option label="李四" value="李四"></el-option>
                                <el-option label="王五" value="王五"></el-option>
                                <el-option label="赵六" value="赵六"></el-option>
                                <el-option label="钱七" value="钱七"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" required class="form-item">
                            <el-radio v-model="form.status" label="1">启用</el-radio> <!-- 用1/0对应数据库char类型 -->
                            <el-radio v-model="form.status" label="0">停用</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第六行：客户地址 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="客户地址" class="form-item">
                            <el-input v-model="form.customers_address" placeholder="请输入客户地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第七行：备注 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" class="form-item">
                            <el-input v-model="form.note" type="textarea" placeholder="请输入备注" class="note-input"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 财务信息 -->
        <div class="form-group">
            <h3>财务信息</h3>
            <el-form ref="financeForm" :model="form" label-width="120px">
                <!-- 第一行：账户名称、纳税人识别号 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账户名称" class="form-item">
                            <el-input v-model="form.account_name" placeholder="请输入账户名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纳税人识别号" class="form-item">
                            <el-input v-model="form.taxid" placeholder="请输入纳税人识别号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第二行：银行账户、开户银行 -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行账户" class="form-item">
                            <el-input v-model="form.bank_account" placeholder="请输入银行账户"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="开户银行" class="form-item">
                            <el-input v-model="form.opening_bank" placeholder="请输入开户银行"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 第三行：开户行地址 -->
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="开户行地址" class="form-item">
                            <el-input v-model="form.bkaddr" placeholder="请输入开户行地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 上传附件（暂不实现文件上传，仅展示） -->
        <div class="form-group">
            <h3>上传附件</h3>
            <div class="upload-area">
                <el-upload action="/CustomerManagement/UploadFile"
                           :file-list.sync="fileList"
                           :on-success="handleUploadSuccess"
                           :before-upload="beforeUpload"
                           :limit="3">
                    <el-button type="primary">上传</el-button>
                </el-upload>
                <div class="tip">您可以上传 doc、pdf、rar 等格式的文件，单个文件上传最大 200MB。</div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div style="margin-top: 20px;">
            <el-button v-on:click ="goBack">关闭</el-button>
            <el-button type="primary" v-on:click ="saveAndAdd">保存并新增</el-button>
            <el-button type="primary" v-on:click ="save">保存</el-button>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        const app = createApp({
            setup() {


                // 1. 表单核心数据（与后端 WMS_Basic_Customer 实体字段对应）
                const form = ref({
                    customer_code: '',       // 自动生成，前端只读
                    customer_name: '',       // 客户名称（必填）
                    job_type: '',            // 所属行业（必填）
                    sources_of_customers: '',// 客户来源（必填）
                    contact_person: '',      // 联系人
                    contact_phone_number: '',// 联系电话
                    email_address: '',       // 电子邮箱
                    customers_address: '',   // 客户地址
                    sales_department_id: 13,  // 销售部门ID（后端关联用，前端可传固定值或下拉映射）
                    // sales_dept_name: '',     销售部门名称（显示用）
                    account_name: '',        // 账户名称
                    taxid: '',               // 纳税人识别号
                    bank_account: '',        // 银行账户
                    opening_bank: '',        // 开户银行
                    bkaddr: '',              // 开户行地址
                    note: '',                // 备注
                    person_in_charge: 4,    // 销售负责人（必填）
                    status: '1',             // 状态：1=启用，0=停用（默认启用）
                    create_by: '张三',                   //创建人
                    create_time: '2023-10-18T10:00:00',  //创建时间
                    update_by: '李四',                  // 更新人
                    update_time: '2023-10-18T10:00:00',  //更新时间
                    annex_code:'',
                    fileList:'',
                });

                // 2. 下拉选单数据（从后端字典接口获取）
                const industryOptions = ref([]);       // 所属行业选项
                const customersourceOptions = ref([]); // 客户来源选项
                const fileList = ref([]);              // 上传文件列表

                // 3. 获取后端字典数据（所属行业、客户来源）
                const getIndustryDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/Industry');
                        industryOptions.value = response.data || [];
                    } catch (error) {
                        console.error('获取所属行业失败：', error);
                        ElementPlus.ElMessage.error('所属行业数据加载失败');
                    }
                };

                const getCustomerSourceDict = async () => {
                    try {
                        const response = await axios.get('/api/Dict/datas/CustomerSource');
                        customersourceOptions.value = response.data || [];
                    } catch (error) {
                        console.error('获取客户来源失败：', error);
                        ElementPlus.ElMessage.error('客户来源数据加载失败');
                    }
                };

                    // 4. 提交新增请求新增客户提交函数                
                       const submitAdd = async (isContinue = false) => {
                           try {
                               // 前端验证（与之前一致）
                               if (!form.value.customer_name) {
                                   ElementPlus.ElMessage.warning('请输入客户名称');
                                   return;
                               }
                               if (!form.value.job_type) {
                                   ElementPlus.ElMessage.warning('请选择所属行业');
                                   return;
                               }

                               // 发送请求到控制器：路由 /CustomerManagement/AddCustomer
                               const response = await axios.post('/CustomerManagement/AddCustomer', form.value);
                               const result = response.data;

                               if (result.success) {
                                   ElementPlus.ElMessage.success('新增客户成功');
                                   // 可获取后端返回的 customerId（示例：console.log(result.customerId)）
                                   console.log('新增客户ID：', result.customerId);

                                   if (isContinue) {
                                       // 保存并新增：清空表单
                                       Object.keys(form.value).forEach(key => {
                                           if (key !== 'status') form.value[key] = '';
                                       });
                                   } else {
                                       // 保存后跳转到列表页（示例路由）
                                       window.location.href = '/CustomerManagement/Index';
                                   }
                               } else {
                                   ElementPlus.ElMessage.error(result.message || '新增失败，请重试');
                               }
                           } catch (error) {
                               console.error('新增请求异常：', error);
                               ElementPlus.ElMessage.error('网络异常，新增失败');
                           }
                       };


                // 5. 按钮事件
                const goBack = () => window.history.back();          // 关闭（返回上一页）
                const save = () => submitAdd(false);                 // 保存（不继续新增）
                const saveAndAdd = () => submitAdd(true);            // 保存并新增



                                    // 1. 文件上传前校验（格式+大小）
                const beforeUpload = (file) => {
                    // 允许的文件格式
                    const allowedTypes = ['application/msword', 'application/pdf', 'application/x-rar-compressed'];
                    // 单个文件最大200MB（转换为字节）
                    const maxSize = 200 * 1024 * 1024;

                    // 格式校验
                    if (!allowedTypes.includes(file.type)) {
                        ElementPlus.ElMessage.error('仅支持 doc、pdf、rar 格式文件');
                        return false;
                    }
                    // 大小校验
                    if (file.size > maxSize) {
                        ElementPlus.ElMessage.error('单个文件最大不能超过200MB');
                        return false;
                    }
                    return true;
                };



                  // 2. 上传成功后：获取附件编号（后端返回）并赋值给formData
                const handleUploadSuccess = (response) => {
                    if (response.success) {
                        // 后端需返回“annex_code”（附件编号，关联SysOrgPublicAttachments表）
                       form.value.annex_code = response.data.annex_code;
                        console.log(form.annex_code);
                        ElementPlus.ElMessage.success('附件上传成功');
                    } else {
                        ElementPlus.ElMessage.error('附件上传失败：' + response.message);
                    }
                };



               


                  const getSalesOrderNumber = async () => {
            try {
                // 修复后的请求
                const res = await axios.post("/NumberingRule/GenerateBusinessNumber",
                    { rule_id: 10 },  // 请求体数据
                    {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }
                );

                if (res.data.success) {
                     form.value.customer_code = res.data.businessNumber;
                    console.log("获取的客户编号：", form.value.sales_order_no);
                    ElementPlus.ElMessage.success('客户编号生成成功');
                } else {
                    ElementPlus.ElMessage.error(res.data.message || '生成客户编号失败');
                }

            } catch (err) {
                console.error("获取客户编号失败：", err);

                // 更详细的错误处理
                if (err.response?.status === 415) {
                    ElementPlus.ElMessage.error('服务器不支持该请求格式');
                } else if (err.response?.status === 404) {
                    ElementPlus.ElMessage.error('接口不存在，请检查URL');
                } else if (err.response?.data?.message) {
                    ElementPlus.ElMessage.error(err.response.data.message);
                } else {
                    ElementPlus.ElMessage.error("获取客户编号失败，请稍后再试");
                }
            }
        };




                // 6. 页面挂载时加载字典数据
                onMounted(() => {
                    getIndustryDict();
                    getCustomerSourceDict();
                    getSalesOrderNumber();
                });

                return {
                    form,
                    industryOptions,
                    customersourceOptions,
                    fileList,
                    goBack,
                    save,
                    saveAndAdd,
                    handleUploadSuccess,
                    beforeUpload
                };
            }
        });
        app.use(ElementPlus);
        app.mount('.container');
    </script>
</body>
</html>